<template>
	<view class="wechat-validation flex-no-horizontal">
		<u-navbar :safeAreaInsetTop="true" leftIcon="" bgColor="transparent" :placeholder="true">
			
			<view class="navbar-right" slot="right">
				<view class="flex-no-horizontal">
					<image src="../../static/chahao.png" class="phone-image" @click="toWechatLogin"></image>
				</view>
			</view>
			
		</u-navbar>
		<view class="content">
			<view class="wechat-title">
				<text class="text-center">绑定常用的社交账号</text>
				<text class="text-center">请绑定常用社交账号方便快捷登录</text>
			</view>
			<u-image class="bind-img" src="@/static/img/login-bind.png" width="322rpx" height="110rpx"></u-image>
			<u-button text="跳转微信绑定账号" icon="/static/weixin.png" shape="circle" color=" #000000" customStyle="height: 98rpx; font-size:32rpx" @click="weChatLogin"></u-button>
			<view class="captions">
				<text>绑定说明：</text>
				<text>1、手机号登录后方便获取头像、昵称等信息，也便于后续您快速授权登录</text>
				<text>2、绑定后，手机号将用于绑定微信账号的安全验证等用途，请勿借予他人，避免不必要损失</text>
			</view>
		</view>
	</view>
	
</template>

<script>
	import { userLoginApi,userRegisterApi } from '../../api/index.js'
	import { uniLogin,uniUserInfo } from '../../utility/weChatLogin.js'
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				phone:'',
				code:'',
			}
		},
		onLoad(e) {
			this.phone = e.phone || ''
			this.code = e.code || ''
		},
		methods: {
			...mapMutations(['setUserInfo','setUserToken']),
			//微信登录
			async weChatLogin() {
				try{
					uni.showLoading({
						title: '正在登录',
						mask:true
					})
					setTimeout(()=> {
						uni.hideLoading()
					}, 5000);
					//唤起微信登录
					const wechatRes = await uniLogin()
					//获取用户信息
					const infoRes = await uniUserInfo()
					//注册接口
					const res = await userRegisterApi({
						code:this.code,
						mobile: this.phone,
						unionId: infoRes.userInfo.unionId,
						registerType:'mobile',
						plate:plus.os.name === 'Android' ? 'Android' : 'MacWx'
					})
					//登录请求
					const loginRes = await userLoginApi({
						unionId:infoRes.userInfo.unionId,
						loginType:'wx'
					})
					
					//缓存用户信息
					this.setUserInfo(loginRes.data.userInfo)
					this.setUserToken('Bearer ' + loginRes.data.token)
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '../ring/index'
						})
					}, 1000);
				}catch(e){
					//TODO handle the exception
					uni.hideLoading()
					uni.showToast({
						title:e.message || e.data,
						icon:'none'
					}) 
				}
			},
			
			toWechatLogin() {
				uni.navigateBack()
			},
			
		}
	}
</script>

<style lang="scss">
  .wechat-validation{
	  height: 100%;
	  background: url(@/static/img/login-bg.png) no-repeat;
	  background-size: contain;
	  padding: 0 40rpx;
	  
	  .phone-image {
	  	width: 56rpx;
	  	height: 56rpx;
	  }
	  
	  .wc-image{
		  text-align: right;
		   padding-top: 49rpx;
		  image{
			  width: 34rpx;
			  height: 34rpx;
			  border-radius: 2rpx;
		  }
	  }
	  .wechat-title{
		  text{
			  display: block;
		  }
		  text:nth-of-type(1){
			  font-size: 56rpx;
			  font-family: PingFang SC;
			  font-weight: 800;
			  padding: 141rpx 0 39rpx 0;
		  }
		  text:nth-of-type(2){
			  font-size: 26rpx;
			  font-family: PingFang SC;
			  font-weight: 500;
			  color: rgba(0, 0, 0, 0.5);
		  }
	  }
	  .bind-img{
		  margin: 80rpx auto;
		  width: 322rpx;
	  }
	  .captions{
		  font-size: 26rpx;
		  font-family: PingFang SC;
		  font-weight: 500;
		  line-height: 40rpx;
		  color: rgba(0, 0, 0, 0.5);
		  &>text{
			  display: block;
		  }
		  text:nth-of-type(1){
			  margin: 97rpx 0 28rpx 0;
		  }
		  text:nth-of-type(2){
			  margin-bottom: 28rpx;
		  }
	  }
  }
</style>
